<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="demonstration">年份</span>
      <el-date-picker
        v-model="searchYear"
        type="year"
        placeholder="选择年"
      />
      <el-button
        type="primary"
        class="filter-item"
        icon="el-icon-search"
        @click="fetchData"
      >搜索</el-button>
      <el-button
        type="primary"
        class="filter-item"
        icon="el-icon-edit"
        @click="dialogVisible = true"
      >新增</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      style="width: 100%"
      align="center"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        prop="year"
        label="年度"
        width="180"
      />
      <el-table-column
        prop="season"
        label="季度"
        width="180"
      />
      <el-table-column
        prop="totalPrice"
        label="总预算"
      />
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="{row,$index}">
          <el-button type="text" size="small" @click="edit(row,$index)">修改预算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!--    模拟框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>请选择增加预算的年份：</span>
      <el-date-picker
        v-model="insertYear"
        type="year"
        placeholder="选择年"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearinsertYear()">取 消</el-button>
        <el-button type="primary" @click="insertBudget()">添 加</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改预算" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="年份" label-width="80">
          <el-input v-model="form.year" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="季度" label-width="80">
          <el-input v-model="form.season" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="预算" label-width="80">
          <el-input v-model="form.totalPrice" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script >
import { insertBudgetByYear, updateBudget, getOne, getBudgetOneYear } from '@/api/budget'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      searchYear: '',
      insertYear: '',
      temp: '',
      dialogVisible: false,
      dialogFormVisible: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        year: ''
      },
      tableData: [{
        id: '',
        year: '',
        season: '',
        totalPrice: ''
      }],
      form: {
        id: '',
        year: '',
        season: '',
        totalPrice: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
      this.insertYear = ''
    },
    clearinsertYear() {
      this.dialogVisible = false
      this.insertYear = ''
    },
    insertBudget() {
      var _year = this.insertYear.getFullYear()
      insertBudgetByYear(_year).then(response => {
        if (response.data.data == 0) {
          this.dialogVisible = false
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
            duration: 1000
          })

          this.getList()
        } else {
          this.$notify({
            title: '失败',
            message: '已存在当前的年份预算,请重新选择',
            type: 'error',
            duration: 1000
          })
        }
      })
    },
    fetchData() {
      this.getList()
    },
    getList() {
      if (this.searchYear == null || this.searchYear == '') {
        var date = new Date()
        this.listQuery.year = date.getFullYear()
      } else {
        this.listQuery.year = this.searchYear.getFullYear()
      }
      getBudgetOneYear(this.listQuery.page, this.listQuery.limit, this.listQuery.year).then(response => {
        this.tableData = response.data.data.data
        this.total = response.data.data.pageTotal
        this.listLoading = false
      })
    },
    handleFilter: function() {
      this.getList()
    },

    edit: function(row, index) {
      var _this = this
      getOne(row.id).then(response => {
        _this.form = response.data.data
        _this.dialogFormVisible = true
      })
    },

    sure: function() {
      updateBudget(this.form).then(response => {
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 1000
        })
        this.getList()
      })
    }

  }
}

</script>
